<%@ page contentType="text/html; charset=UTF-8"%>
<%@ include file="/WEB-INF/jsp/common/init.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<jsp:include page="/WEB-INF/jsp/common/common.jsp" />
<jsp:include page="/WEB-INF/jsp_lib/validate.jsp" />
<link rel="stylesheet" type="text/css"
	href="${path}/style_lib/zTree_v3/css/zTreeStyle/zTreeStyle.css"></link>
<script type="text/javascript"
	src="${path}/style_lib/zTree_v3/js/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript">
	function zTreeOnClick(event, treeId, treeNode, clickFlag) {
			var url = "${path}/ix/job/edit_form.htm?location_id=" + treeNode.id;
			$("input[name='location_id']").val(treeNode.id);
			add_and_edit(url);
		};
	function getUrl(treeId, treeNode) {
		return "${path}/ix/job/async_list.htm";
	}
	function ajaxDataFilter(treeId, parentNode, responseData) {
		if (responseData) {
			for (var i = 0; i < responseData.length; i++) {
				responseData[i].iconOpen = "${path}/style_lib/zTree_v3/icon/open.jpg";
				responseData[i].iconClose = "${path}/style_lib/zTree_v3/icon/close.jpg";
				responseData[i].icon = "${path}/style_lib/zTree_v3/icon/open.jpg";

				responseData[i].id = responseData[i]._id;
				responseData[i].times = 1;
				responseData[i].isParent = responseData[i].isParent;
				responseData[i].count = responseData[i].count;
			}
		}
		return responseData;
	};
	function beforeExpand(treeId, treeNode) {
		if (!treeNode.isAjaxing) {
			treeNode.times = 1;
			ajaxGetNodes(treeNode, "refresh");
			return true;
		} else {
			alert("zTree 正在下载数据中，请稍后展开节点。。。");
			return false;
		}
	}
	function onAsyncSuccess(event, treeId, treeNode, msg) {
		if (!msg || msg.length == 0) {
			return;
		}
		var zTree = $.fn.zTree.getZTreeObj("treeDemo"), totalCount = treeNode.count;
		if (treeNode.children.length < totalCount) {
			setTimeout(function() {
				ajaxGetNodes(treeNode);
			}, perTime);
		} else {
			treeNode.icon = "";
			zTree.updateNode(treeNode);
			zTree.selectNode(treeNode.children[0]);
		}
	}
	function onAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus,
			errorThrown) {
		var zTree = $.fn.zTree.getZTreeObj("treeDemo");
		alert("异步获取数据出现异常。");
		treeNode.icon = "";
		zTree.updateNode(treeNode);
	}
	var setting = {
		async : {
			enable : true,
			autoParam : [ "id=location_id" ],
			url : getUrl,
			dataFilter : ajaxDataFilter
		},
		edit : {
			enable : false
		},
		view : {
			fontCss : {
				"margin" : "2px"
			},
			expandSpeed : ""
		},
		data : {
			simpleData : {
				enable : true,
				idKey : '_id',
				pIdKey : 'super_id',
				rootPId : 'root'
			}
		},
		callback : {
			onClick : zTreeOnClick,
			beforeExpand : beforeExpand,
			onAsyncSuccess : onAsyncSuccess,
			onAsyncError : onAsyncError
		}
	};
	var zNodes = $.parseJSON('${locationJson}');
	var zTreeObj;
	$(function() {
		$.each(zNodes, function(i, n) {
			zNodes[i].iconOpen = "${path}/style_lib/zTree_v3/icon/open.jpg";
			zNodes[i].iconClose = "${path}/style_lib/zTree_v3/icon/close.jpg";
			zNodes[i].icon = "${path}/style_lib/zTree_v3/icon/open.jpg";

			zNodes[i].id = zNodes[i]._id;
			zNodes[i].times = 1;
			zNodes[i].isParent = zNodes[i].isParent;
			zNodes[i].count = zNodes[i].count;
		});

		zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
		zTreeObj.expandAll(false);

		var zTree = $.fn.zTree.getZTreeObj("treeDemo");
		var node = zTree.getNodeByParam("id", '${location_id}');
		zTree.selectNode(node);
		//zTreeObj.expandNode(node,true,true);
	});
</script>
</head>
<body>
	<jsp:include page="/WEB-INF/jsp_lib/tip.jsp" />
	<input name='location_id' value='${location_id}' type="hidden" />
	<div class="row-fluid">
		<div style="float: left;">
			<div class="w-box" style="width:300px;">
				<h2 style="border-bottom:solid 1px #B1E6EC;">
					<div>
						<a title="添加根节点" href="javascript:add();"
							style="font-size:16px;color:#3B78BE;margin-right: 10px;">职位管理(+)</a>
					</div>
				</h2>
				<div class="zTreeDemoBackground left"
					style="overflow:scroll;height:450px;border:solid 1px #B1E6EC;border-top-width: 0px;">
					<ul id="treeDemo" class="ztree"></ul>
				</div>
			</div>
		</div>
		<div id="add_edit_form" style="margin-left: 310px;"></div>
	</div>
	<script type="text/javascript">
		var perCount = 100, perTime = 100;
		function add_and_edit(param_url) {
			$.ajax({
				type : "post",
				url : param_url,
				success : function(html) {
					$("#add_edit_form").html(html);
				}
			});
		}
		function add_form() {
			var url = "${path}/ix/job/add_form.htm";
			add_and_edit(url);
		}

		function ajaxGetNodes(treeNode, reloadType) {
			var zTree = $.fn.zTree.getZTreeObj("treeDemo");
			if (reloadType == "refresh") {
				treeNode.icon = "${path}/style_cp/img/loading.gif";
				zTree.updateNode(treeNode);
			}
			zTree.reAsyncChildNodes(treeNode, reloadType, true);
		}
		function add(id) {
			var param_url = "${path}/ix/job/add_child.htm?id=" + id;
			$.ajax({
				type : "post",
				url : param_url,
				success : function(html) {
					$("#add_edit_form").html(html);
				}
			});
		}
	</script>
</body>
</html>
